<!--
 * @Descripttion: 
 * @version: 
 * @Author: yuanpingfang
 * @Date: 2023-02-25 17:15:35
 * @LastEditors: yuanpingfang
 * @LastEditTime: 2023-04-15 23:26:00
-->
<template>
  <div class="app-container">
  <div class="home">
    <div class="app_box">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card shadow="hover">
            <router-link :to="'/user/archives'" class="link-type">
            <div class="app_inner">
              <span class="app_icon" style="background: rgb(85, 132, 253)"
                ><svg class="svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user" fill=""></use></svg></span
              ><span>个人档案</span>
            </div>
            </router-link>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <router-link :to="'/attend/attendance_calender'" class="link-type">
            <div class="app_inner">
              <span class="app_icon" style="background: rgb(52, 112, 255)"
                ><svg class="svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-druid" fill=""></use></svg></span
              ><span>考勤休假</span>
            </div>
            </router-link>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover">
            <div class="app_inner">
              <span class="app_icon" style="background: rgb(255, 136, 1)"
                ><svg class="svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-swagger" fill=""></use></svg></span
              ><span>工时填写</span>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover">
            <div class="app_inner">
              <span class="app_icon" style="background: rgb(0, 214, 185)"
                ><svg class="svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peoples" fill=""></use></svg></span
              ><span>证明开具</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  font-family: open sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  .app_box {
    margin: 0 -8px;
  }
}

.app_inner {
  height: 64px;
  line-height: 32px;
  padding: 16px 16px 16px 64px;
  position: relative;
  cursor: pointer;
  .app_icon {
    position: absolute;
    left: 14px;
    top: 12px;
    height: 40px;
    width: 40px;
    background: #cfd4db;
    color: #fff;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;

    .svg-icon {
      text-align: center;
      font-size: 22px;
      line-height: 40px;
      margin: 8px auto;
      display: block;
    }
  }
}
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>
